<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li {
				list-style-type: none;
				float: left;
				padding: 0px 20px;
			}

			div {
				height: 50px;
				background-color: bisque;
			}

			span {
				display: none;
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li data-index="0">精选</li>
				<li data-index="1">美食</li>
				<li data-index="2">百货</li>
				<li data-index="3">个护</li>
			</ul>
		</div>
		<div>
			<span>精选</span>
			<span>美食</span>
			<span>百货</span>
			<span>个护</span>
		</div>
		<script type="text/javascript">
			//根据标签选择器获取所有的li节点对象（数组）
			var li = document.querySelectorAll('li');
			//遍历数组，给每个li节点对象设置onmouseover属性值（绑定函数）
			for (var i = 0; i < li.length; i++) {
				li[i].onmouseover = function() {
					//根据标签选择器获取所有的span节点对象（数组）
					var span = document.querySelectorAll('span');
					//设置所有的span隐藏
					for (var j = 0; j < span.length; j++){
						span[j].style.display = 'none';
					}
					span[this.dataset.index].style.display = 'block';					
				}
			}
			
		</script>
	</body>
</html>
